<template>
    <div style="z-index: 1">
        <!--个人信息-->
        <div class="main_style_4">
            <div class="hill"></div>
            <div class="round4"></div>
            <h2 style="margin-top: 10%;text-align: center">Edward</h2>
            <div style="text-align: center">一个热于研究的技术人</div>
            <div style="margin-top: 6%;display: flex;justify-content: space-evenly">
                <div @mouseover="QQvisable=true" @mouseleave="QQvisable=false"><a>
                    <div style="text-align: center"><img class="hoverStatus" src="../../assets/images/qq.png" alt=""
                                                         style="width: 40px;height: 40px"></div>
                    <div style="text-align: center">QQ:</div>
                    <div style="font-weight: bolder;text-align: center">2810315114</div>
                </a>
                </div>
                <div @mouseover="WXvisable=true" @mouseleave="WXvisable=false"><a>
                    <div style="text-align: center"><img class="hoverStatus" src="../../assets/images/weixin.png" alt=""
                                                         style="width: 40px;height: 40px"></div>
                    <div style="text-align: center">微信:</div>
                    <div style="font-weight: bolder;text-align: center">Damon_Edward</div>
                </a>
                </div>
                <div @mouseover="GZHvisable=true" @mouseleave="GZHvisable=false"><a>
                    <div><img class="hoverStatus" src="../../assets/images/gonghzonghao.png" alt=""
                              style="width: 40px;height: 40px"></div>
                    <div>公众号:</div>
                    <div style="font-weight: bolder">魔术猿</div>
                </a>
                </div>
            </div>
        </div>
        <img v-show="QQvisable" src="../../assets/images/qqewm.png" alt=""
             style="width: 300px;z-index: 2;position: fixed;right: 0;top: 10%">
        <img v-show="WXvisable" src="../../assets/images/weixinewm.jpg" alt=""
             style="width: 250px;z-index: 2;position: fixed;right: 0;top: 20%">
        <img v-show="GZHvisable" src="../../assets/images/gzhewm.png" alt=""
             style="width: 360px;z-index: 2;position: fixed;right: -1%;top: 20%">
        <!--最新文章-->
        <Card style="margin-top: 24%;width: 320px;overflow: hidden" dis-hover>
            <p slot="title" style="text-align: left;font-weight: bolder">
                <Icon type="ios-list-box"/>
                最多人喜欢
            </p>
            <div>
                <div style="text-align: left;position:relative;margin-bottom: 2%;padding-bottom:2%;border-bottom: 1px solid #dddddd;"
                     v-for="(item,index) in articleList" :key="index">
                    <router-link :to="`/articleDetail/${item.aid}`">
                        <div style="width: 280px;height: 140px;overflow: hidden">
                            <img class="hoverStatus" style="width: 280px;height: 140px;"
                                 :src="item.apicture!==null?item.apicture.split(',').slice(0,1):articleDefault"
                                 alt=""/>
                        </div>
                    </router-link>
                    <span style="position: absolute;left: 0;top: 0;z-index: 2">
                            <Tag v-if="index===0" color="error">{{index+1}}</Tag>
                            <Tag v-else-if="index===1" color="success">{{index+1}}</Tag>
                            <Tag v-else-if="index===2" color="primary">{{index+1}}</Tag>
                            <Tag v-else color="default">{{index+1}}</Tag>
                            <span style="font-weight: bolder;color: white">{{item.atitle}}</span>
                    </span>
                </div>
            </div>
        </Card>
        <!--标签-->
        <Card style="margin-top: 8%;width: 320px;overflow: hidden" dis-hover>
            <p slot="title" style="text-align: left;font-weight: bolder">
                <Icon type="md-bookmark"/>
                标签云
            </p>
            <div>
                <Tag style="margin: 2%" v-for="(tag,index) in tagList" :key="index" size="large"
                     :color="tagStyle[Math.floor(Math.random()*tagStyle.length)]">
                    {{tag.tagContent}}
                </Tag>
            </div>
        </Card>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        articleDefault: 'https://lhamster-edward-blog-1302533254.cos.ap-nanjing.myqcloud.com/meaningoflife/1.jpeg',
        QQvisable: false,
        WXvisable: false,
        GZHvisable: false,
        articleList: [],
        tagList: [],
        articleVo: {
          pageNum: 1,
          pageSize: 6,
          sort: 2,
          status: 0
        },
        tagStyle: ['primary', 'success', 'error', 'warning', 'magenta', 'red', 'volcano', 'orange', 'gold', 'yellow', 'lime', 'green', 'cyan', 'blue', 'geekblue', 'purple']
      }
    },
    mounted () {
      this.getBlog()
      this.getTags()
    },
    methods: {
      getBlog () {
        this.$http.get('article', { params: new URLSearchParams(this.articleVo) }).then(res => {
          res = res.data
          if (res.code === 0) {
            this.total = res.count
            this.articleList = res.data
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      getTags () {
        this.$http.get('tags').then(res => {
          res = res.data
          if (res.code === 0) {
            this.tagList = res.data
          } else {
            this.$Message.error(res.msg)
          }
        })
      }
    }
  }
</script>

<style scoped>
    .main_style_4 {
        width: 320px;
        height: 400px;
        background-color: #ffffff;
        position: relative;
        overflow: hidden;
        border-radius: 10px;
    }

    .hill {
        margin: 5px 5px 5px 5px;
        background-image: url(../../assets/images/tree.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        height: 180px;
        filter: grayscale(0%);
        transition: ease-in all 0.5s;
    }

    .round4 {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 30%;
        left: 33%;
        z-index: 100;
        border-radius: 50%;
        background-image: url(https://lhamster-edward-blog-1302533254.cos.ap-nanjing.myqcloud.com/headPicture/myHead.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 0px -10px;
        transition: ease-in all 0.5s;
    }

    .round4:hover {
        transform: scale(1.2)
    }

    .hoverStatus {
        transition: 0.5s;
    }

    .hoverStatus:hover {
        transform: scale(1.2)
    }
</style>
